<template>
  <a-input v-model="innerValue" @blur="resolveValue"/>
</template>
<script>
import {createModelForVue, createProps} from '@/utils';

export default {
  name: 'RelationSelectorButtonNameInput',
  model: createModelForVue(),
  props: {
    value: createProps(String),
    selectorField: createProps(Object)
  },
  data() {
    return {
      innerValue: undefined
    }
  },
  methods: {
    change(v) {
      this.$emit('change', v);
    },
    createDefaultValue() {
      return this.selectorField && this.selectorField.label || undefined;
    },
    resolveValue() {
      this.change(this.innerValue || this.createDefaultValue())
    }
  },
  watch: {
    value: {
      immediate: true,
      handler() {
        this.innerValue = this.value || this.createDefaultValue()
        if (!this.value) {
          this.change(this.innerValue)
        }
      }
    }
  }
};
</script>